<template>
	<div>
		<div style="display: flex;flex-direction: row;">
			<img id="img" :src="logo">
			<div id="alteraddress">
				<p style="font-size: 6px;margin-bottom:20px;">
					修 改 个 人 信 息
				</p>
			</div>
		</div>
		<div class="daohanglan">
			<div>
				<el-row class="tac">
					<el-col :span="100">
						<el-menu default-active="/address" class="el-menu-vertical-demo" background-color="#00aaff" text-color="#000000"
						active-text-color="#ffffff" :router="true">
							<el-menu-item index="/personalcenter">
								<i class="el-icon-shopping-cart-1"></i>
								<span slot="title">购物车</span>
							</el-menu-item>
							<el-menu-item index="/orders">
								<i class="el-icon-document"></i>
								<span slot="title">我的订单</span>
							</el-menu-item>
							<el-menu-item index="/display">
								<i class="el-icon-goods"></i>
								<span slot="title">我的晒物</span>
							</el-menu-item>
							<el-menu-item index="/address">
								<i class="el-icon-s-home"></i>
								<span slot="title">我的地址</span>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-card class="box-cardadd" shadow="hover">
					<div class="clearfix">
						<div >
							{{userName}}
						</div>
						<div style="margin-left: 30px;">
							{{userTelephone}}
						</div>
					</div>
					<div style="margin-top: 10px;">{{userAddress}}</div>
					<div style="display: flex;flex-direction: row-reverse;">
						<el-row>
							<el-button size="mini" round>编辑</el-button>
							<el-button size="mini" round>删除</el-button>
						</el-row>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				logo: require("../assets/logo.png"),
				headicon: require("../assets/headicon.png"),
				shopping: require("../assets/logo.png"),
				input: '',
				userName:'',
				userTelephone:'',
				userAddress:'',
				num: 1
			}
		},
		methods: {
			mounted() {
				var that = this
				
				this.$axios.post("http://localhost:8088/springboot/getuserinfo")
					.then(function(res) {
						console.log(res.data)
						that.userName = res.data.userName
						that.userTelephone = res.data.userTelephone
						that.userAddress = res.data.userAddress
					}).catch(function(err) {})
			},
			requestUser(){
				var that = this
				this.$axios.post('http://localhost:8080/getbookbyid/' + this.input)
					.then(function(response) {
						console.log(response.data.data)
						alert("查询成功")
						that.tableData = response.data.data
					}).catch(function(error) {
						console.log(error)
							
					})
			},
			handleChange(value) {
				console.log(value);
			}
		}
	}
</script>

<style>
	#img {
		width: 110px;
		height: 30px;
		margin-top: 10px;
		margin-left: 10px;
		float: left;
	}

	#alteraddress {
		width: 275px;
		height: 17px;
		background-color: #ffffff;
		border-radius: 20px;
		text-align: center;
		margin-top: 20px;
		margin-left: 55px;
		border: 1px solid rgba(187, 187, 187, 100);

	}

	.daohanglan {
		margin-top: 50px;
		margin-left: 50px;
		margin-bottom: 50px;
		display: flex;
		flex-direction: row;
	}

	.clearfix{
		display: flex;
		flex-direction: row;
	}
	.imggs {
		width: 100px;
		height: 50px;
	}

	.box-cardadd {
		margin-left: 30%;
		margin-top: 20px;
		width: 600px;
		height: 120px;
	}
</style>
